<!-- 首页/累计积压订单 -->
<template>
<div>
  <countTo class="num" prefix='累计积压订单 ' suffix=' 条' :startVal='startVal' :endVal='endVal' :duration='3000' />
</div>

</template>

<script>
import countTo from 'vue-count-to'
import request from '@/utils/request'
export default {
  name: 'backlogOrders',
  components: { countTo },
  data() {
    return {
      startVal: 0,
      endVal: 0
    }
  },
  created() {
    this.getBacklogOrdersNum()
  },

  // 这里使用 hook 监听 beforeDestroy 生命周期，这样 timer 只需被定义在生命周期里，定义在 data 里是没必要的
  mounted() {
    let timer = setInterval(() => {
      this.startVal = this.endVal
      // 单位毫秒，这里给设置成1分钟
      this.getBacklogOrdersNum()
    }, 1000 * 60 * 1)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      timer = null
    })
    // 当路由被 keep-alive 缓存时是不走 beforeDestroy 生命周期的，此时需要借助 activated 和 deactivated 这两个生命周期钩子
    // let timer = setInterval(() => {
    //   console.log('setInterval')
    // }, 2000)
    // this.$on('hook:activated', () => {
    //   if (timer === null) { // 避免重复开启定时器
    //     timer = setInterval(() => {
    //       console.log('setInterval')
    //     }, 2000)
    //   }
    // })
    // this.$on('hook:deactivated', () => {
    //   clearInterval(timer)
    //   timer = null
    // })
  },
  methods: {
    getBacklogOrdersNum() {
      request({
        url: '/wms/delivery/getBacklogOrderNum',
        method: 'get'
      }).then(res => {
        this.endVal = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.num {
  color: red;
  font-weight: bold;
}
</style>
